<template>
    <div>
        <template>
            <el-button style="margin-bottom:30px;" type="primary" @click="handleXin">新增</el-button>
            <el-input placeholder="编号搜索" icon="search" v-model="input2" :on-icon-click="handleIconClick" style="width:150px;float:right">
            </el-input>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="serial_number" label="编号" width="100">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="150">
                </el-table-column>
                <el-table-column prop="post" label="职位" width="150">
                </el-table-column>
                <el-table-column prop="vote_type" label="参与投票" width="200" :filters="[{ text: '最佳主题酒店评选活动', value: '最佳主题酒店评选活动' },{text: '最佳度假酒店评选活动', value: '最佳度假酒店评选活动' },{text: '最佳度假酒店评选活动', value: '最佳度假酒店评选活动' },{text: '酒店业十大风云人物', value: '酒店业十大风云人物' }]" :filter-method="filterTag">
                    <template scope="scope">
                        <el-tag :type="scope.row.vote_type === '酒店业十大风云人物' ? 'primary' : 'success'" close-transition>{{scope.row.vote_type}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="add_time" label="添加时间" width="150">
                </el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input2:"",
            initialData:[],
            tableData: []
        }
    },
    mounted() {
        this.$http.get(this.ajaxUrl() + "/mess/itemDataAll").then((res) => {
            if (res.data.type === 'succeed') {
                //展示数据转换
                for (let i = 0; i < res.data.data.length; i++) {

                    res.data.data[i].vote_type = this.voteTypeString(res.data.data[i].vote_type);

                    res.data.data[i].add_time = this.addTimeMucht(res.data.data[i].add_time);
                }

                this.tableData = res.data.data;
                this.initialData = res.data.data;
            } else {
                this.$message.error('酒店查询失败！,请刷新');
            }
        })
    },
    methods: {
        handleIconClick(ev) {
            if(this.input2.length ==0){
                this.tableData = this.initialData
                return;
            }
            for (let i = 0; i < this.initialData.length; i++) {
                if (this.input2 == this.initialData[i].serial_number) {
                    this.tableData = [this.initialData[i]];
                }
            }
        },
        filterTag(value, row) {
            return row.vote_type === value;
        },
        voteTypeString(type) {
            if (type == 0) {
                return '最佳主题酒店评选活动';
            } else if (type == 1) {
                return '最佳度假酒店评选活动';
            } else if (type == 2) {
                return '最佳度假酒店评选活动';
            } else if (type == 3) {
                return '酒店业十大风云人物';
            }
        },
        addTimeMucht(time) {
            let timeDate = new Date(+time);
            return timeDate.getFullYear() + "-" + this.isD(timeDate.getMonth() + 1) + "-" + this.isD(timeDate.getDate()) + " " + this.isD(timeDate.getHours()) + ":" + this.isD(timeDate.getMinutes());
        },
        isD(int) {
            if (int < 10) {
                return "0" + int;
            } else {
                return int;
            }
        },
        handleXin() {
            this.$router.push('/vote/message');
        },
        handleEdit(index, row) {
            this.$router.push('/vote/message?id=' + row.id);
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get(this.ajaxUrl() + "/mess/itemDataRomve?id=" + row.id).then((res) => {
                    if (res.data.type === 'succeed') {
                        this.tableData.splice(index, 1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message({
                            type: 'info',
                            message: '删除失败!'
                        });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

